<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第三天 数据驱动视图</title>
</head>
<body>
	<div id='app'>
		<input type="text" v-model='msg'>
		<h3>{{ msg }}</h3>
		<button @click='handlerCilck'>按钮</button>
		<h3>{{ stus[0].name }}</h3>
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">
		//wacth 监听单个属性
		//基本的数据类型 简单监视
		//复杂数据类型   深度监视
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'',
					stus:[{name:'jack'}]
				}
			},
			methods:{
				handlerCilck(){
					this.stus[0].name='roes'
				}
			},
			watch:{
				//监听单一属性
				msg:function(newV,oldV){
					console.log(newV,oldV);
				},
				//监听复杂数据类型
				//深度监视
				stus:{
					deep:true,
					handler:function(newV,oldV){
						console.log(newV[0].name)
					}
				}
			}
		})
	</script>
</body>
</html>
